<template>
  <div>
    <PackBack></PackBack>
    <van-skeleton title :row="15" :loading="isFirst">
    <van-cell value="内容">
      <template #title>
        <span class="custom-title">订单号</span>
      </template>

      <template #value>
        <span
          ><van-tag type="success">{{ data.oid }}</van-tag></span
        >
      </template>
    </van-cell>

    <van-cell value="内容" v-if="data?.details.length != 0">
      <template #title>
        <span class="custom-title">供应商</span>
      </template>

      <template #value>
        <span>
          <van-tag type="primary">{{ data?.details[0].supplier }}</van-tag>
        </span>
      </template>
    </van-cell>

    <div style="background: rgb(238, 238, 238); height: 6px; width: 100%"></div>

    <div v-for="(item, i) in data?.details" :key="item.id">
      <van-cell value="内容">
        <template #title>
          <span class="custom-title">商品{{ i + 1 }}</span>
        </template>

        <template #value>
          <span
            ><van-tag type="warning">{{ item.name }}</van-tag></span
          >
        </template>
      </van-cell>

      <van-cell value="内容">
        <template #title>
          <span class="custom-title">金额</span>
        </template>

        <template #value>
          <span
            ><van-tag type="danger"
              >￥{{ (item.money / item.number).toFixed(2)}}×{{
                item.number
              }}=￥{{ item.money}}</van-tag
            ></span
          >
        </template>
      </van-cell>

      <van-cell value="内容">
        <template #title>
          <span class="custom-title">收货数量(件)</span>
        </template>

        <template #value>
          <span>
            <van-field
              type="number"
              v-model="item.number"
              input-align="right"
          /></span>
        </template>
      </van-cell>

      <van-cell value="内容">
        <template #title>
          <span class="custom-title">收货金额(元)</span>
        </template>

        <template #value>
          <span>
            <van-field
            type="number"
              v-model="item.money"
              input-align="right"
            />
          </span>
        </template>
      </van-cell>

      <div
        style="background: rgb(238, 238, 238); height: 3px; width: 100%"
      ></div>

      
     
    </div>
    <van-field v-model="data.explain" label="说明" placeholder="说明" />
<div class="my_divider"></div>
<van-button block @click="methods.collect()" type="primary" style="margin-top:20px">收货</van-button>
  </van-skeleton>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watchEffect, nextTick,provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getMerchantSingleOrder,merchantReceive } from "@/api/order";
import PackBack from '@/components/PageBack.vue'
import { showToast } from "vant";
const parentMessage = '收货'; // 父组件数据
provide('mytitle', parentMessage); // 提供数据给子组件
const main = reactive({});
const router = useRouter();
const { params } = useRoute();
const data = ref({
  details: [],
  explain:''
});
const isFirst=ref(true);
const methods = {
    collect:async ()=>{
       const arr= data.value.details.map((d)=>{
            return {
                explain:"",
                id:d.id,
                receiveMoney:d.money,
                receiveNumber:d.number
            }
        });
        let price=0;
        arr.map((d)=>{
            price+=d.receiveNumber*d.receiveMoney;
        })

        const obj={
            id:params.id,
            explain:data.value.explain===undefined?"":data.value.explain,
            number:0,
            money:price,
            details:arr
        }

       const res=await merchantReceive(obj);
       if(res.result===0){
          showToast("收货成功");
          router.go(-1);
       }

      
    },
    changeCount:()=>{
       
    },
    // 页面数据
  getData: async () => {
    const res = await getMerchantSingleOrder({ id: params.id });
    if (res.result === 0) {
      data.value = res.data;
      isFirst.value=false;
      console.log(data.value);
    }
  },
};

onMounted(() => {
  methods.getData();
});
</script>

<style  scoped>
</style>